<template>
  <el-dialog
    title="释放线索"
    :visible.sync="visible"
    width="600px"
  >
    <el-form
      ref="kickOutForm"
      :model="kickOutForm"
      :rules="kickOutRules"
      label-width="120px"
    >
      <el-form-item
        label="释放原因:"
        prop="reason"
      >
        <el-input
          v-model="kickOutForm.reason"
          placeholder="请输入释放原因"
        ></el-input>
      </el-form-item>
      <el-form-item label="常见原因:">
        <el-select
          v-model="kickOutForm.quickReason"
          placeholder="请选择常见原因"
          @change="handleQuickReasonChange"
        >
          <el-option
            label="客户改行"
            value="客户改行"
          ></el-option>
          <el-option
            label="价格太高"
            value="价格太高"
          ></el-option>
          <el-option
            label="不接电话"
            value="不接电话"
          ></el-option>
          <el-option
            label="逼单死了"
            value="逼单死了"
          ></el-option>
        </el-select>
      </el-form-item>
    </el-form>
    <span
      slot="footer"
      class="dialog-footer"
    >
      <el-button @click="visible = false">取消</el-button>
      <el-button
        type="primary"
        @click="handleTemporaryKickOut"
      >
        暂时释放
      </el-button>
      <el-button
        type="danger"
        @click="handlePermanentKickOut"
      >
        永久释放
      </el-button>
    </span>
  </el-dialog>
</template>

<script>
export default {
  name: 'DialogKickOut',
  props: {},
  data() {
    return {
      visible: false,
      kickOutForm: {
        reason: '',
        quickReason: ''
      },
      kickOutRules: {
        reason: [{ required: true, message: '请输入释放原因', trigger: 'blur' }]
      }
    }
  },

  methods: {
    openDialog() {
      this.visible = true
      this.resetForm()
    },
    resetForm() {
      this.kickOutForm = {
        reason: '',
        quickReason: ''
      }
    },
    handleQuickReasonChange(value) {
      if (value) {
        this.kickOutForm.reason = value
      }
    },
    handleTemporaryKickOut() {
      this.$refs.kickOutForm.validate((valid) => {
        if (valid) {
          this.$emit('temporaryKickOut', {
            ...this.kickOutForm,
            type: 'temporary'
          })
          this.visible = false
        }
      })
    },
    handlePermanentKickOut() {
      this.$refs.kickOutForm.validate((valid) => {
        if (valid) {
          this.$emit('permanentKickOut', {
            ...this.kickOutForm,
            type: 'permanent'
          })
          this.visible = false
        }
      })
    }
  }
}
</script>

<style scoped>
/* 可按需添加样式 */
</style>
